<template>
    <div class="layout-header-container">
        <div class="header-left">
            <div class="sidebar-trigger">
                <i class="el-icon-mars-nav2" @click="toggleSideBar" v-bind:class="{'t1': sidebar}"></i>
            </div>

            <!-- Breadcrumb 面包屑 -->
            <custom-bread-crumb></custom-bread-crumb>
        </div>

        <div class="header-right">

            <div class="header-toolbar-wrapper">

                <div class="dropdown-wrapper">
                    <el-dropdown class="menu-dropdown">
                        <span class="el-dropdown-link">
                            消息
                            <i class="msg-count">235</i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>资源管理</el-dropdown-item>
                            <el-dropdown-item>人员管理</el-dropdown-item>
                            <el-dropdown-item>财务管理</el-dropdown-item>
                            <el-dropdown-item>权限管理</el-dropdown-item>
                            <el-dropdown-item>分销平台</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-dropdown class="menu-dropdown">
                        <span class="el-dropdown-link">
                            费用
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>资源管理</el-dropdown-item>
                            <el-dropdown-item>人员管理</el-dropdown-item>
                            <el-dropdown-item>财务管理</el-dropdown-item>
                            <el-dropdown-item>权限管理</el-dropdown-item>
                            <el-dropdown-item>分销平台</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-dropdown class="menu-dropdown">
                        <span class="el-dropdown-link">
                            工单
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>资源管理</el-dropdown-item>
                            <el-dropdown-item>人员管理</el-dropdown-item>
                            <el-dropdown-item>财务管理</el-dropdown-item>
                            <el-dropdown-item>权限管理</el-dropdown-item>
                            <el-dropdown-item>分销平台</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-dropdown class="menu-dropdown" @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{user.email}}
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="dropdown-wrap">
                            <el-dropdown-item class="dropdown-user">
                                <a href="javascript:;" class="user-entrance" @click="handlerUserBaseInfo">
                                    <span class="user-icon el-icon-location-outline"></span>
                                    <span class="user-text">基本信息</span>
                                </a>
                                <a href="javascript:;" class="user-entrance">
                                    <span class="user-icon el-icon-mars-m"></span>
                                    <span class="user-text">实名认证</span>
                                </a>
                                <a href="javascript:;" class="user-entrance">
                                    <span class="user-icon el-icon-mars-m"></span>
                                    <span class="user-text">安全设置</span>
                                </a>
                                <a href="javascript:;" class="user-entrance">
                                    <span class="user-icon el-icon-mars-m"></span>
                                    <span class="user-text">安全管控</span>
                                </a>
                                <a href="javascript:;" class="user-entrance">
                                    <span class="user-icon el-icon-mars-m"></span>
                                    <span class="user-text">访问控制</span>
                                </a>
                                <a href="javascript:;" class="user-entrance" @click="handleFullscreen">
                                    <span class="user-icon" :class="[ex==true?'el-icon-mars-arrowexpand': 'el-icon-mars-arrowshrink']"></span>
                                    <span class="user-text">{{ex==true?'全屏浏览':'退出全屏'}}</span>
                                </a>
                            </el-dropdown-item>

                            <el-dropdown-item command="logout" divided style="text-align: center">退出管理控制台</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import screenfull from "screenfull";
import CustomBreadCrumb from "./components/custom-bread-crumb/custom-bread-crumb.vue";

export default {
    name: "Header",
    components: {
        CustomBreadCrumb
    },
    data() {
        return {
            ex: true
        };
    },
    computed: {
        ...mapGetters(["sidebar", "user"])
    },
    methods: {
        toggleSideBar() {
            this.$store.dispatch("handlerToggleSideBar");
        },
        handleCommand(command) {
            if (command === "logout") {
                this.$store.dispatch("LogOut").then(() => {
                    location.reload(); // 为了重新实例化vue-router对象 避免bug
                });
            }
        },
        handlerUserBaseInfo() {
            this.$router.push({ path: '/profile' })
        },
        handleFullscreen() {
            if (!screenfull.enabled) {
                this.$message({
                    message: "you browser can not work",
                    type: "warning"
                });
                return false;
            }
            this.ex = screenfull.isFullscreen;
            screenfull.toggle();
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/styles/common.scss";
$header-bg: #303643;
$header-hover: #40485b;
$header-line: #2a2f32;
$header-height: 64px;
.header-toolbar-wrapper {
    .dropdown-wrapper {
        display: flex;
        justify-content: center;

        .menu-dropdown {
            box-sizing: border-box;
            height: $header-height;
            display: block;
            z-index: 2;
            cursor: pointer;
            span {
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 20px;
                height: $header-height;
                width: 100%;
            }
            &:hover {
                //background: $header-hover;
            }

            .msg-count {
                font-size: 12px;
                color: #fff;
                background: #ff9900;
                border-radius: 5px;
                padding: 2px 5px;
                margin-left: 5px;
                display: inline-block;
                line-height: 16px;
                vertical-align: top;
                text-align: center;
                font-style: normal;
            }
        }
    }
}
.dropdown-wrap {
    padding-top: 0;
    padding-bottom: 0;
    .dropdown-user {
        overflow: hidden;
        width: 240px;
        margin: 8px 0;
        .user-entrance {
            width: 80px;
            height: 80px;
            float: left;
            text-align: center;
            color: #333;
            -webkit-transition: background 0.15s;
            transition: background 0.15s;
            border-radius: 2px;
            .user-icon {
                font-size: 25px;
                margin: 8px auto 4px;
                width: 40px;
                height: 30px;
                display: block;
                line-height: 30px;
                color: #788d9b;
            }
            .user-text {
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
                letter-spacing: 0.02em;
                font-size: 12px;
            }
            &:hover {
                background: #f5f5f5;
            }
        }
    }

    .el-dropdown-menu__item:focus,
    .el-dropdown-menu__item:not(.is-disabled):hover {
        background-color: #fff;
        color: red;
    }
}
</style>